<template>
  <div id="cesiumContainer"></div>
  <div id="showBtn">
    <button @click="changeEntityShow">显示管线</button>
  </div>
</template>
<script setup>
import * as Cesium from 'cesium'
import {
  MaterialAppearance,
  Material,
  BoxGeometry,
  Matrix4,
  Cartesian3,
  Transforms,
  GeometryInstance,
  Primitive,
  VertexFormat,
} from 'cesium'
import Viewer from 'cesium/Source/Widgets/Viewer/Viewer';
import * as turf from '@turf/projection'
import coordtransform from 'coordtransform'
import { onMounted  } from 'vue';
import geojson from '../public/geojson/LineString_pipe.json?url'
let viewer = null;


// const computeCircle = (radius) => {
//   const positions = [];
//   for (let i = 0; i < 360; i++) {
//       const radians = Cesium.Math.toRadians(i);
//       positions.push(
//       new Cesium.Cartesian2(
//           radius * Math.cos(radians),
//           radius * Math.sin(radians)
//       )
//       );
//   }
//   return positions;
// };

const download = (filename, text) => {
  let pom = document.createElement( 'a');
  pom.setAttribute('href','data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  pom.setAttribute('download',filename);
  if (document.createEvent) {
    var event = document .createEvent( 'MouseEvents');
    event.initEvent('click',true,true);
    pom.dispatchEvent(event);
  }else{
    pom.click();
  } 
}
const initMap = async () => {
  Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5Yjc0MTYzMS1mMmZmLTRiNTctODZhMi1mZjRjYzQ2NTFmMWEiLCJpZCI6MTMyNDAyLCJpYXQiOjE2ODA3NjYzMDF9.9Jj665lzy-TlV5dJkSBZKBmHnSaqyOVrRM5cvI_t8rg";
  viewer = new Cesium.Viewer("cesiumContainer",{
    infoBox:false
  });

// 创建 ENU 转换矩阵后，再基于 ENU 转换矩阵作 Z 轴平移 500000 * 0.5 个单位
const boxModelMatrix = Cesium.Matrix4.multiplyByTranslation(
  Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(112.0, 23.0)),
  new Cesium.Cartesian3(0.0, 0.0, 500000 * 0.5),
  new Cesium.Matrix4()
)
// 创建 Geometry 和 Instance
const boxGeometry = Cesium.BoxGeometry.fromDimensions({
  vertexFormat: VertexFormat.POSITION_NORMAL_AND_ST, // 注意这里，下面要细说
  dimensions: new Cartesian3(400000.0, 300000.0, 1500000.0), //长宽高
})
const boxGeometryInstance = new GeometryInstance({
  geometry: boxGeometry,
  modelMatrix: boxModelMatrix, // 应用 ENU + 平移矩阵
})

// 准备 fabric shader 材质和外观对象
const shader = `czm_material czm_getMaterial(czm_materialInput materialInput) {
  czm_material material = czm_getDefaultMaterial(materialInput);
  material.diffuse = vec3(0.8, 0.2, 0.1);
  material.specular = 3.0;
  material.shininess = 0.8;
  material.alpha = 0.6;
  return material;
}`
const appearance = new MaterialAppearance({
  material: new Material({
    fabric: {
      source: shader
    }
  }),
})
const pri1 = new Primitive({
    geometryInstances: boxGeometryInstance,
    appearance: appearance,
  })
viewer.scene.primitives.add(
  pri1
)

// viewer.camera.flyTo({
//   destination: Cesium.Cartesian3.fromDegrees(112.0, 23.0, 1800000),
//   orientation: new Cesium.HeadingPitchRoll(0.6, -0.8, 0.0)
// })

viewer.camera.flyTo({
  destination: Cesium.Cartesian3.fromDegrees(112.0, 23.0, 1500000),
        orientation: {//设置相机的Heading，Pitch，Roll，参照上图
          heading: Cesium.Math.toRadians(0.0),
          pitch: Cesium.Math.toRadians(-30.0),
          roll: 0.0 
        },
        duration: 3
})
}

onMounted( () => {
  initMap();
  console.log(turf)

  
})
</script>
<style scoped lang="scss">
#app{
  width:100vw;
  /* height: 100vh; */
}
#cecsium{
  width: 100vw;
  height: 200vh;
}
</style>
